<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="utf-8">
    <title>基本资料</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    <style>
        .layui-form-item .layui-input-company {width: auto;padding-right: 10px;line-height: 38px;}
    </style>
</head>
<style>
    .img-container {
        position: relative;
        border: 1px solid #ccc;
        width: 1600px;
        height: 400px;
        max-width: 100%;
        max-height: 100%;
    }

    .img-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        align-items: center;
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .img-list img {
        width: 300px;
        height: 300px;
        object-fit: cover;
        margin: 10px;
    }
</style>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div class="layui-form layuimini-form">
            <div class="layui-form-item">
                <label class="layui-form-label">订单描述</label>
                <div class="layui-input-block">
                    <input autocomplete="off" disabled="disabled" th:value="${orderInfo.orderInfoName}" lay-verify="required" lay-reqtext="订单描述不可为空" class="layui-input" name="orderInfoName" placeholder="订单描述" type="text">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">代取人姓名</label>
                <div class="layui-input-inline">
                    <input autocomplete="off" disabled="disabled" th:value="${orderInfo.orderUserName}" class="layui-input" lay-verify="required" lay-reqtext="代取人姓名不可为空"  name="orderUserName" placeholder="代取人姓名" type="text">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">联系电话</label>
                <div class="layui-input-inline">
                    <input autocomplete="off" disabled="disabled" th:value="${orderInfo.orderInfoTel}" class="layui-input"  lay-verify="required" lay-reqtext="联系电话不可为空" name="orderInfoTel" placeholder="联系电话" type="tel">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">代取校区</label>
                <div class="layui-input-inline">
                    <select id="orderInfoArea" name="orderInfoArea" disabled="disabled">
                        <option value="new">新区</option>
                        <option value="mid">中</option>
                        <option value="old">老区</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">快递站点</label>
                <div class="layui-input-block">
                    <input autocomplete="off" disabled="disabled" th:value="${orderInfo.orderInfoNet}" lay-verify="required" lay-reqtext="快递站点不可为空" class="layui-input" name="orderInfoNet" placeholder="快递站点" type="text">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">送达时间</label>
                <div class="layui-input-inline">
                    <input type="text" disabled="disabled"  th:value="${#calendars.format(orderInfo.orderInfoNeedTime, 'yyyy-MM-dd HH:mm:ss')}" name="orderInfoNeedTime" lay-verify="required" lay-reqtext="送达时间不可为空" id="orderInfoNeedTime" autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">送达楼层</label>
                <div class="layui-input-block">
                    <input autocomplete="off" disabled="disabled" th:value="${orderInfo.orderInfoSeorey}" class="layui-input" name="orderInfoSeorey" lay-verify="required" lay-reqtext="送达楼层不可为空"
                           placeholder="送达楼层" type="text">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">价格</label>
                <div class="layui-input-inline">
                    <input autocomplete="off" disabled = disabled th:value="${orderInfo.orderPrice}" class="layui-input" name="orderPrice" lay-verify="required" lay-reqtext="价格不可为空"
                           placeholder="价格" type="number">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="orderInfoDes" disabled="disabled" th:text="${orderInfo.orderInfoDes}" class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">图片</label>
                <div class="layui-input-block">
                    <div class="img-container">
                        <div id="imgList" class="img-list"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/lay-config.js?v=1.0.4}" charset="utf-8"></script>
<script th:inline="javascript">
    layui.use(['form','miniTab','upload'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            upload = layui.upload,
            miniTab = layui.miniTab;


        var orderInfoArea = [[${orderInfo.orderInfoArea}]];
        $("#orderInfoArea").each(function() {
            // this代表的是<option></option>，对option再进行遍历
            $(this).children("option").each(function() {
                // 判断需要对那个选项进行回显
                if (this.value == orderInfoArea) {
                    // 进行回显
                    $(this).attr("selected","selected");
                }
            });
            form.render('select');
        });
        var imgUrls = [];
        var photoList = [[${orderInfo.orderPhotoList}]];
        imgUrls.push(photoList);
        for(var i=0; i<photoList.length; i++){
            var imgHtml='<img src="'+photoList[i].orderPhotoUrl+'" />';
            $('#imgList').append(imgHtml);
        };

    });
</script>
</body>
</html>